<template>
  <div>
    <!-- 面包屑 -->
    <!-- <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <img class="icon" src="@/assets/authentication/组6-6.png" alt="" />
        <el-breadcrumb-item>
          <span class="span">用户中心</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="span" style="color: #666">认证信息</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->
    <!-- 认证信息主体 -->
    <div class="box">
      <div class="title">
        <h3>
          <span>平台认证</span>
        </h3>
      </div>
      <!-- <div class="box-center"> -->
      <!-- 进度条 -->
      <div class="f1">
        <ul>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组172.png" alt="" />
              <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
            </div>
            <span>经办人认证</span>
          </li>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组174.png" alt="" />
              <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
            </div>
            <span style="margin-left: -0.2083rem">组织信息核验</span>
          </li>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组178.png" alt="" />
              <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
            </div>
            <span style="margin-left: -0.0833rem">意愿认证</span>
          </li>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组180.png" alt="" />
            </div>
            <span style="margin-left: 0px">完成</span>
          </li>
        </ul>
      </div>
      <div class="f2">
        <img src="@/assets/shangpiao/组162.png" alt="" />
        <h4>认证成功</h4>
      </div>
      <div class="btn">
        <div class="btns next" @click="go1">完成</div>
      </div>
    </div>
  </div>
</template>

<script>
import { userEnt } from '@/utils'

export default {
  data() {
    return {
      id: ''
    }
  },
  mounted() {
    this.id = sessionStorage.getItem('id')
  },
  // 方法
  methods: {
    async status() {
      let { data } = await userEnt(this.id)
      data.ent = null
      if (data.ent) {
        sessionStorage.setItem('entname', data.ent.entname)
        this.$store.commit('updateUserName', data.ent.entname)
        return
      }
    },
    setTim() {
      setTimeout(() => {
        this.$router.go(0)
      }, 1000)
    },
    go1() {
      localStorage.removeItem('succ')
      this.$router.push('/platform')
      this.setTim()
      this.status()
    }
  }
}
</script>

<style lang="scss" scoped>
// 面包屑
.breadcrumb {
  display: flex;
  align-items: center;
  height: 0.3958rem;
  font-size: 0.0833rem;
  background-color: rgb(242, 244, 247);
  .icon {
    margin: 0 0.0521rem 0 0.0208rem;
  }
  .span {
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #999999;
  }
  img {
    width: 0.0938rem;
    height: 0.0938rem;
    margin-right: 0.026rem;
  }
}
// 主体
.box {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  border-radius: 0.0313rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.2604rem;
  @media only screen and (min-width: 1px) and (max-width: 899px) {
    height: 730px;
  }
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    height: 510px;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    height: 510px;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    height: 730px;
  }

  // 标题
  .title {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 0.1302rem;
    h3 {
      font-size: 0.1146rem;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #222222;
    }
  }
  .f1 {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 0.1042rem;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 0.2083rem;
        .icon {
          .icon1 {
            width: 0.1875rem;
          }
          .icon2 {
            width: 0.9375rem;
            height: 0.0104rem;
            margin: 0 0.1042rem;
          }
        }
        span {
          font-size: 0.1042rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #627dca;
          margin-left: -0.1563rem;
          margin-top: 0.0156rem;
        }
      }
    }
  }
  .f2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    width: 100%;
    // height: 200px;
    img {
      // 小屏
      @media only screen and (min-width: 900px) and (max-width: 1535px) {
        margin-top: 50px;
      }
      // 中屏
      @media only screen and (min-width: 1536px) and (max-width: 1919px) {
        margin-top: 50px;
      }
      // 大屏
      @media only screen and (min-width: 1920px) and (max-width: 2580px) {
        margin-top: 120px;
      }

      width: 1.7656rem;
      height: 1.1458rem;
    }
    h4 {
      font-size: 0.0833rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #b3b3b3;
    }
  }
  // 按钮
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6458rem;
    height: 0.1823rem;
    .btns {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.0469rem;
      height: 0.1823rem;
      border: 1px solid #48a0b8;
      border-radius: 0.0208rem;
      font-size: 0.0938rem;

      // 小屏
      @media only screen and (min-width: 900px) and (max-width: 1535px) {
        margin-top: 50px;
      }
      // 中屏
      @media only screen and (min-width: 1536px) and (max-width: 1919px) {
        margin-top: 50px;
      }
      // 大屏
      @media only screen and (min-width: 1920px) and (max-width: 2580px) {
        margin-top: 250px;
      }
    }
    .last {
      margin-right: 0.1771rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #48a0b8;
    }
    .next {
      background: linear-gradient(-90deg, #5d98f8, #4b5af8);
      color: #ffffff;
    }
  }
}
</style>
